<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<style type="text/css">
	#wrapper{
		margin-left: 200px;
		font-family: Verdana;
		font-size: 12px;
		color: #7a7a7a;
		line-height: 18px;
		font-style: normal;
		margin-bottom:  100px;
	}
	#insert_info{
		border-spacing: 2px;
		border-color: gray;
		border-collapse: collapse;
		width:550px;
		text-align: left;
		border-top: 1px solid #383838;
		border-bottom: 1px solid #383838;
		background: #fff;
	} 
	#insert_info td{
		text-align: left;
		padding: 10px;
		border-top: 1px solid #e0e0e0;
	}
	#insert_info th{
		width:80px;
		text-align: left;
		background: #f5f5f5;
		padding: 10px 0 10px 10px;
		font-weight: bold;
		border-top: 1px solid #e0e0e0;
	}
	#middle{
		margin-left:40px;
	}
	#info{
		width:550px;
		padding-top: 25px;
		padding-bottom: 10px;
		border-bottom: 1px solid #383838;
		margin-bottom: 0;
	}
	.btn{
		width:130px;
		height:30px;
		margin-right:10px;
		background-color: #993B3B;
		font-family: "맑은 고딕";
		font-size:9pt;
		color:white;
		border: 0;
		border-radius: 5px;
	}
	.input_basic{
		border: 1px solid #dcdcdc;
		height: 16px;
	}
	.input_basic:focus {
		background:#f7f3ed;
		border:1px solid #706047;
	}
	#confirmId{
		width:70px;
		height:25px;
		background-color: #D0D0D0;
		font-family: "맑은 고딕";
		font-size:9pt;
		color:black;
		border: 0;
		border-radius: 2px;
	}
	#agree_box {
		width:523px;
		height:80px;
		border:5px solid #ededed;
		overflow-y:scroll;
		padding:10px;
		margin:10px auto 0 0;
	}
	#insert_chk {
		margin:10px 0 10px 0;
		text-align:left; 
	}
	#insert_btn{
		width:523px;
	}
	select{
		font-size:12px;
		height: 18px;
	}
	select:focus{
		background:#f7f3ed;
		border:1px solid #706047;
	}
	#b{
		color:red;
	}
	.inputb{
		border-bottom: #999999 1px solid;
		border-left: #cecece 1px solid;
		border-right: #999999 1px solid;
		border-top: #cecece 1px solid;
		color: #000000;
		font-size: 9pt;
		background-color: #ededed;
		width:60px;
		height:25px;
	}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	function checkBox(){
		
		if(document.getElementById('use').checked == false || document.getElementById('agree').checked == false){
			alert('이용약관 및 개인정보 취급방침에 동의해주세요.');
			return false;
		}
		return true;
	}
	
	//서버에 데이터 전달하고 결과 데이터 요청
	$(function(){
		var check = 0;
		
		$('#confirmEmail').click(function(){
			var uemail = $('#email').val();
			
			$.getJSON('confirmEmail.do',{email:uemail},function(data){
				if(data.result=='double' || uemail==''){
					check = 0;
					$('#email_signed').html('사용할 수 없는 이메일 입니다.').css('color','red');
					$('#email').val('').focus();
				}else if(data.result=='use'){  //아이디 미중복 
					
					//메일형식 @체크
					if(uemail.indexOf("@") == -1 || uemail.indexOf(".") == -1){  //@없으면 -1반환 
						check = 0;
						$('#email_signed').html('이메일 형식을 확인해주세요.').css('color','blue');
						$('#email').val('').focus();
						return false;
					}
				
					check = 1;   //중복확인 작업수행 
					$('#email_signed').html('사용가능한 이메일 입니다.').css('color','black');
				
				}else{
					alert('서버 오류');
				}
			});
		});
		
		$('#insert').submit(function(event){
			if(check == 0){
				$('#email_signed').html('중복확인 필수!!').css('color','red');
				$('#email').val('').focus();
				return false;
			}
		});
	});
</script>
</head>
<body>
<div id="wrapper">
	<div id="title">
		<img src="./images/member/title_join.jpg">
	</div>
	<form:form commandName="memberCommand" id="insert" onsubmit="return checkBox()">
		<div id="middle">
			<p id="info">
				<img src="./images/member/info_join_03.jpg">
			</p>
			<table id="insert_info">
				<tr>
					<th>메일</th>
					<td width="100"><form:input path="email" size="20" title="입력하세요" /></td>
					<td style="padding-right: 0px; width: 70px;"><input type="button" value="중복확인" id="confirmEmail" class="inputb"></td>
					<td><span id="email_signed"></span><form:errors path="email" id="b"/></td>
				</tr>
				<tr>
					<th>이름</th>
					<td colspan="3"><form:input path="name" class="nput_basic" size="10" maxlength="10" title="입력하세요"/><form:errors path="name" id="b"/></td>
				</tr>
				<tr>
					<th>생년월일</th>
					<td colspan="3"><input type="date" name="birth" class="nput_basic" size="10" maxlength="8" title="입력하세요"/><form:errors path="birth" id="b"/></td>
				</tr>
				<tr>
					<th>성별</th>
					<td colspan="3"><input type="radio" name="gender" value="남자" checked>남자 <input type="radio" name="gender" value="여자">여자</td>
				</tr>
				
				<tr>
					<th>비밀번호</th>
					<td colspan="3"><form:password path="passwd" showPassword="false" class="nput_basic" size="20" title="입력하세요" maxlength="15"/><form:errors path="passwd" id="b"/><br>
					<img src="./images/member/txt_help_pw.jpg"></td>
				</tr>
				<tr>
					<th>연락처</th>
					<td colspan="3"><form:input path="phone" class="nput_basic" size="15" maxlength="11" title="입력하세요"/><form:errors path="phone" id="b"/><br>
					<img src="./images/member/txt_help_phone.jpg"></td>
				</tr>
				<tr>
					<th>선호음료</th>
					<td colspan="3">
						<select name="favor">
							<c:forEach var="item" items="${list}">
								<option value="${item.item_name}">${item.item_name}</option>
							</c:forEach>
						</select>
					</td>
				</tr>
			</table>
			<p style="height: 5px"></p>
			<p>
				<img src="./images/member/info_join_agree.jpg">
			</p>
			<div align="left" id="agree_box">
				<p>커피하겐나 홈페이지에 오신 여러분을 환영합니다.</p>
				<p>회원가입은 커피하겐나 홈페이지의 보다 편리한 사용을 위한 또 하나의 방법으로 회원가입을 위해서는 커피하겐나 홈페이지의 약관에 동의 하셔야 합니다.</p>
				<p>[이용약관]</p>
				<p>제1조 (목적)</p>
				<p>본 약관은 커피하겐나의 인터넷 서비스망인 http://haggenna.com(이하 ‘커피하겐나 홈페이지'이라 함)에서 제공하는 서비스의 이용조건 및 절차에 관한 기본적인 사항을 정함을 목적으로 합니다</p>
				<p>제2조 (회원)</p>
				<p>(1) 회원은 커피하겐나 홈페이지 회원약관 (이하 '약관'이라 합니다)에 동의하고 회사가 정하는 등록절차를 거침으로써 회원의 자격을 얻습니다.</p>
				<p>(2) 회원은 회사가 제공하는 홈페이지의 서비스를 이용하실수 있습니다.</p>
				<p>(3) 회원은 자신의 자유로운 의사에 따라 회사가 정하는 절차를 거침으로써 커피하겐나 홈페이지 회원에서 탈퇴할 수 있습니다. </p>
				<p>제5조 (회원의 의무)</p>
				<p>(1) 회원은 자신의 ID와 PASSWORD를 자신의 책임 하에 관리하여야 하며, 관리소홀로 인하여 발생하는 모든 결과에 대한 책임은 회원에게 있습니다.</p>
				<p>(2) 회원은 다음 각 호의 행위를 하여서는 아니됩니다.</p>
				<p>&nbsp;&nbsp;&nbsp;1. 다른 회원의 ID를 부정하게 사용하는 행위</p>
				<p>&nbsp;&nbsp;&nbsp;2. 회사의 사전 승낙 없이 홈페이지의 서비스 내용을 상업적 목적으로 복제하거나 이를 출판 &nbsp;&nbsp;&nbsp;및 방송 등에 사용하거나 제3자에게 제공하는 행위</p>
				<p>&nbsp;&nbsp;&nbsp;3. 회사와 제3자의 저작권 등 기타 권리를 침해하는 행위</p>
				<p>&nbsp;&nbsp;&nbsp;4. 허위의 내용, 타인의 명예와 신용을 훼손하는 내용을 게시하거나 유포하는 등 공공의 &nbsp;&nbsp;&nbsp;질서와 선량한 풍속을 위반하는 행위</p>
				<p>(3) 회원은 약관에서 규정하는 사항과 커피하겐나 홈페이지 이용안내 또는 회사가 공지하는 제반 주의사항을 준수하여야 합니다.</p>
				<p>(4) 회원은 회사의 사전승낙 없이 홈페이지가 제공하는 서비스를 이용하여 영업행위를 하거나 그러한 영업행위에 응하여서는 아니되며, 이를 위반하여 발생한 결과에 대하여 회사는 책임을 지지않습니다.</p>
				<p>(5) 회원이 이 약관을 위배하여 회사에 손해 또는 손실을 끼친 경우 배상 또는 보상을 하여야 합니다.</p><br>
				<p>제6조 (회원 자격의 제한과 박탈)</p>
				<p>(1) 회원이 이 약관을 위배하는 경우 회사는 회원 자격을 일정기간 제한하거나 박탈할 수 있습니다.</p>
				<p>(2) 회사가 회원 자격을 박탈한 경우 자격이 박탈된 회원의 회원 재가입을 제한 할 수 있습니다.</p><br>
				<p>제5조 (회원의 의무)</p>
				<p>(1) 회원은 자신의 ID와 PASSWORD를 자신의 책임 하에 관리하여야 하며, 관리소홀로 인하여 발생하는 모든 결과에 대한 책임은 회원에게 있습니다.</p>
				<p>(2) 회원은 다음 각 호의 행위를 하여서는 아니됩니다.</p>
				<p>&nbsp;&nbsp;&nbsp;1. 다른 회원의 ID를 부정하게 사용하는 행위</p>
				<p>&nbsp;&nbsp;&nbsp;2. 회사의 사전 승낙 없이 홈페이지의 서비스 내용을 상업적 목적으로 복제하거나 이를 출판 &nbsp;&nbsp;&nbsp;및 방송 등에 사용하거나 제3자에게 제공하는 행위</p>
				<p>&nbsp;&nbsp;&nbsp;3. 회사와 제3자의 저작권 등 기타 권리를 침해하는 행위</p>
				<p>&nbsp;&nbsp;&nbsp;4. 허위의 내용, 타인의 명예와 신용을 훼손하는 내용을 게시하거나 유포하는 등 공공의 &nbsp;&nbsp;&nbsp;질서와 선량한 풍속을 위반하는 행위</p>
				<p>(3) 회원은 약관에서 규정하는 사항과 커피하겐나 홈페이지 이용안내 또는 회사가 공지하는 제반 주의사항을 준수하여야 합니다.</p>
				<p>(4) 회원은 회사의 사전승낙 없이 홈페이지가 제공하는 서비스를 이용하여 영업행위를 하거나 그러한 영업행위에 응하여서는 아니되며, 이를 위반하여 발생한 결과에 대하여 회사는 책임을 지지않습니다.</p>
				<p>(5) 회원이 이 약관을 위배하여 회사에 손해 또는 손실을 끼친 경우 배상 또는 보상을 하여야 합니다.</p><br>
				<p>제6조 (회원 자격의 제한과 박탈)</p><br>
				<p>(1) 회원이 이 약관을 위배하는 경우 회사는 회원 자격을 일정기간 제한하거나 박탈할 수 있습니다.</p>
			</div>
			<p id="insert_chk">
				<label>
					<input type="checkbox" id="agree" title="체크하세요">
					<img src="./images/member/txt_pi_agree.jpg">
				</label>
			</p>
			<p style="height: 5px"></p>
			<p>
				<img src="./images/member/info_join_pi.jpg">
			</p>
			<div id="agree_box">
				<p><b>개인정보 수집·이용 등에 대한 동의</b></p>
				<p><b>1. 수집하는 개인정보 항목</b></p>
				<p><b>2. 개인정보의 수집 및 이용목적 </b></p>
				<p><b>3. 개인정보의 보유 및 이용기간 </b></p>
				<p> -------------------------------------------- </p>
				<p>&nbsp;- 필수입력사항 :  성명, 아이디, 비밀번호, 이메일주소, 핸드폰번호,자택또는 직장 주소</p>
				<p>&nbsp;- 선택입력항목 :  즐겨찾는메뉴,매장,트위터계정,페이스북계정,커피하겐나찾는이유, 방문시간대, 이용횟수, 직업, 기념일, 관심분야</p>
				<p>&nbsp;- 서비스 이용 또는 사업처리 과정에서 생성 수집되는 각종 거래 및 개인 성향 정보: 서비스 이용기록, 접속로그, 쿠키, 접속IP정보 등</p>
				<br>
				<p><b>1. 수집하는 개인정보 항목 </b></p><br>
				<p>&nbsp;- 필수입력사항 :  성명, 아이디, 비밀번호, 이메일주소, 핸드폰번호,자택또는 직장 주소</p>
				<p>&nbsp;- 선택입력항목 :  즐겨찾는메뉴,매장,트위터계정,페이스북계정,커피하겐나찾는이유, 방문시간대, 이용횟수, 직업, 기념일, 관심분야</p>
				<p>&nbsp;- 서비스 이용 또는 사업처리 과정에서 생성 수집되는 각종 거래 및 개인 성향 정보: 서비스 이용기록, 접속로그, 쿠키, 접속IP정보 등</p>
				<br>
				<p>&nbsp;※ 커피하겐나는 회원에게 다양한 서비스를 제공하기 위해 다음과 같은 개인정보를 수집하고 있습니다. 단, 이용자의 기본적 인권 침해의 우려가 있는 민감한 개인정보(인종 및 민족, 사상 및 신조, 출신지 및 본적지, 정치적 성향 및 범죄기록, 건강상태 및 성생활 등)는 수집하지 않습니다.</p>
				<br><br>
				<p>&nbsp;- 필수입력사항 :  성명, 아이디, 비밀번호, 이메일주소, 핸드폰번호,자택또는 직장 주소</p>
				<p>&nbsp;- 선택입력항목 :  즐겨찾는메뉴,매장,트위터계정,페이스북계정,커피하겐나찾는이유, 방문시간대, 이용횟수, 직업, 기념일, 관심분야</p>
				<p>&nbsp;- 서비스 이용 또는 사업처리 과정에서 생성 수집되는 각종 거래 및 개인 성향 정보: 서비스 이용기록, 접속로그, 쿠키, 접속IP정보 등</p>
				<br>
				<p><b>1. 수집하는 개인정보 항목 </b></p><br>
				<p>&nbsp;- 필수입력사항 :  성명, 아이디, 비밀번호, 이메일주소, 핸드폰번호,자택또는 직장 주소</p>
				<p>&nbsp;- 선택입력항목 :  즐겨찾는메뉴,매장,트위터계정,페이스북계정,커피하겐나찾는이유, 방문시간대, 이용횟수, 직업, 기념일, 관심분야</p>
				<p>&nbsp;- 서비스 이용 또는 사업처리 과정에서 생성 수집되는 각종 거래 및 개인 성향 정보: 서비스 이용기록, 접속로그, 쿠키, 접속IP정보 등</p>
				<br>
				<p>&nbsp;※ 커피하겐나는 회원에게 다양한 서비스를 제공하기 위해 다음과 같은 개인정보를 수집하고 있습니다. 단, 이용자의 기본적 인권 침해의 우려가 있는 민감한 개인정보(인종 및 민족, 사상 및 신조, 출신지 및 본적지, 정치적 성향 및 범죄기록, 건강상태 및 성생활 등)는 수집하지 않습니다.</p>
				<br><br>
			</div>
			<p id="insert_chk">
				<input type="checkbox" id="use" title="체크하세요">
				<img src="./images/member/txt_use_agree.jpg">
			</p>
			<p style="height: 5px"></p>
			<br>
			<br>
			<p id="insert_btn" style="text-align: center">
				<input type="submit" value="확 인" class="btn" style="cursor: pointer">
				<input type="button" value="메인으로" 
					 onclick="location.href='index.do'" class="btn" style="cursor: pointer">
			</p>
		</div>
	</form:form>
</div>
</body>
</html>